<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">
<body>
	<ui:composition>

		<table border="0" style="width: 100%;">
			<tr>
				<td style="width: 70%;"><h1>PURCHASE REQUISITION</h1></td>
				<td style="width: 12%;">
					<p:panelGrid columns="1"
						style="width:100%;">
						<f:facet name="header">
							<h:outputText value="DATE" />
						</f:facet>
						<h:outputText rendered="#{empty bean.requisitionDate}" 
							value="&nbsp;" />
						<h:outputText rendered="#{not empty bean.requisitionDate}" 
							value="#{bean.requisitionDate}">
							<f:convertDateTime pattern="MM/dd/yyyy" />
						</h:outputText>
					</p:panelGrid></td>
				<td style="width: 18%;"><p:panelGrid columns="1"
						style="width:100%;">
						<f:facet name="header">
							<h:outputText value="PR NUMBER" />
						</f:facet>
						<h:outputText style="font-style:italic;"
							rendered="#{empty bean.prNumber}"
							value="Not available in #{bean.status} status" />
						<h:outputText rendered="#{not empty bean.prNumber}"
							value="#{bean.formattedPrNumber}" />
					</p:panelGrid></td>
			</tr>
		</table>


		<table border="0" style="width: 100%;">
			<tr>
				<td style="width: 35%;"><p:panelGrid style="width: 100%;">
						<p:row>
							<p:column styleClass="ui-widget-header" style="width:80px;">
								<h:outputText value="PROJECT" />
							</p:column>
							<p:column>
								<h:outputText value="#{bean.project.displayString}" />
							</p:column>
						</p:row>
					</p:panelGrid></td>
				<td style="width: 15%;"><p:panelGrid style="width: 100%;">
						<p:row>
							<p:column styleClass="ui-widget-header" style="width:55px;">
								<h:outputText value="JOB#" />
							</p:column>
							<p:column>
								<h:outputText value="#{bean.project.jobNumber}" />
							</p:column>
						</p:row>
					</p:panelGrid></td>
				<td style="width: 50%;"><p:panelGrid style="width: 100%;">
						<p:row>
							<p:column styleClass="ui-widget-header" style="width:80px;">
								<h:outputText value="PURPOSE" />
							</p:column>
							<p:column>
								<h:outputText value="#{bean.description}"  rendered="#{not backingBean.statusOpen}" />
								<p:inputText id="description"  rendered="#{backingBean.statusOpen}"
									value="#{backingBean.description}"
									required="true" requiredMessage="Description is mandatory!"
									maxlength="255" style="width:97%;">
									<p:ajax event="keyup" update="#{updateDirty}"
										listener="#{backingBean.markDirty}" />
								</p:inputText>
								<br />
								<p:message for="description" />
							</p:column>
						</p:row>
					</p:panelGrid></td>
			</tr>
		</table>

		<ui:remove>
			<p:panelGrid style="margin-top:20px; width: 100%;">
				<f:facet name="header">
					<p:row>
						<p:column>
							<h:outputText value="ID" rendered="#{empty bean.prNumber}" />
							<h:outputText value="PR Number"
								rendered="#{not empty bean.prNumber}" />
						</p:column>
						<p:column>
							<h:outputText value="Project" />
						</p:column>
						<p:column style="width:40%;">
							<h:outputText value="Description" />
						</p:column>
						<p:column style="width:10%;">
							<h:outputText value="Job Area" />
						</p:column>
						<p:column>
							<h:outputText value="Requistion Date" />
						</p:column>
						<p:column>
							<h:outputText value="Status" />
						</p:column>
					</p:row>
				</f:facet>
				<p:row rendered="#{backingBean.statusOpen}">
					<p:column>
						<h:outputText value="#{bean.id}" />
					</p:column>
					<p:column>
						<h:outputText value="#{userSession.selectedProject.displayString}" />
					</p:column>
					<p:column style="width:40%;">
						<p:inputText id="description" value="#{backingBean.description}"
							required="true" requiredMessage="Description is mandatory!"
							maxlength="255" style="width:97%;">
							<p:ajax event="keyup" update="#{updateDirty}"
								listener="#{backingBean.markDirty}" />
						</p:inputText>
						<br />
						<p:message for="description" />
					</p:column>
					<p:column style="width:10%;">
						<p:inputText id="jobarea1" value="#{backingBean.jobarea}"
							required="true" requiredMessage="Job Area is mandatory!"
							maxlength="5">
							<p:ajax event="keyup" update="#{updateDirty}"
								listener="#{backingBean.markDirty}" />
						</p:inputText>
						<br />
						<p:message for="jobarea1" />
					</p:column>
					<p:column>
						<h:outputText value="#{bean.requisitionDate}">
							<f:convertDateTime pattern="MM/dd/yyyy h:mm a" />
						</h:outputText>
					</p:column>
					<p:column>
						<h:outputText value="#{bean.status}" />
					</p:column>
				</p:row>
				<p:row rendered="#{not backingBean.statusOpen}">
					<p:column>
						<h:outputText value="#{bean.id}"
							rendered="#{backingBean.statusPending}" />
						<h:outputText value="#{bean.formattedPrNumber}"
							rendered="#{not backingBean.statusPending}" />
					</p:column>
					<p:column>
						<h:outputText
							value="#{bean.project.code} : #{bean.project.description}" />
					</p:column>
					<p:column>
						<h:outputText value="#{bean.description}" />
					</p:column>
					<p:column>
						<h:outputText value="#{backingBean.jobarea}" />
					</p:column>
					<p:column>
						<h:outputText value="#{bean.requisitionDate}">
							<f:convertDateTime pattern="MM/dd/yyyy" />
						</h:outputText>
					</p:column>
					<p:column>
						<h:outputText value="#{bean.status}" />
					</p:column>
				</p:row>
			</p:panelGrid>
		</ui:remove>


	</ui:composition>
</body>
</html>